<template>
  <div>
    <el-row class="row-top">
      <el-col :span="10" :offset="4">
        <el-steps :active="active" finish-status="success">
          <el-step title="拍下商品"></el-step>
          <el-step title="付款到平台"></el-step>
          <el-step title="确认收货"></el-step>
          <el-step title="评价"></el-step>
        </el-steps>
      </el-col>
    </el-row>
    <el-row class="row-top">
      <el-col :span="16" :offset="4">
        <el-form :inline="true" :model="order" ref="order" :rules="rules" >
          <el-form-item label="请选择提货地址" prop="commId">
            <el-select placeholder="请选择提货地址" v-model="order.commId" @click.native="openCommUser">
              <el-option  :label="addr.addrName" :value="addr.addrId"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row class="row-top">
      <el-col :span="16" :offset="4"><p>确认订单信息</p></el-col>
    </el-row>
    <el-row>
      <el-col :span="16" :offset="4">
        <el-table :data="order.carts">
          <el-table-column label="店铺宝贝">
            <template slot-scope="scope">
              <el-image
                style="width: 100px; height: 120px"
                :src="scope.row.shop.imags[0].imagUrl">
              </el-image>
            </template>
          </el-table-column>
          <el-table-column label="商品属性">
            <template slot-scope="scope">
              {{scope.row.shop.shopName}}
              {{scope.row.shop.type.name}}
            </template>
          </el-table-column>
          <el-table-column label="单价(元)" prop="shop.shopPrice"></el-table-column>
          <el-table-column label="数量">
            <template slot-scope="scope">
              <el-input-number size="mini" @change="handleChange(scope.row.id,scope.row.quantity)"
                               v-model="scope.row.quantity" :min="1"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="小计(元)">
            <template slot-scope="scope">
              ￥{{scope.row.quantity*scope.row.shop.shopPrice}}
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row class="row-top">
      <el-col :span="4" :offset="18">
        <span>实付款:￥ {{money}}</span>
      </el-col>
    </el-row>
    <el-row class="row-top">
      <el-col :span="4" :offset="18">
        <el-button class="big_btn" type="primary" @click="pay('order')">提交订单</el-button>
      </el-col>
    </el-row>
    <el-dialog
      :show-close="false"
      :visible.sync="dialogVisible"
      width="25%">
      <pay-money ref="payMoney"></pay-money>
    </el-dialog>
    <el-dialog
      title="选择提货地址"
      :before-close="handleClose2"
      :visible.sync="dialogVisible2"
      width="50%">
      <comm-user-view ref="commUserView"></comm-user-view>
    </el-dialog>
  </div>
</template>

<script>
  import PayMoney from "./PayMoney";
  import CommUserView  from "../commUser/CommUserView";
  export default {
    name: "AddOrder",
    data() {
      return {
        order: {uid: "", commId: "", name:"",phone:"", carts: []},
        commUser: [],
        active: 0,
        cartIds: JSON.parse(this.$route.params.type),
        dialogVisible: false,
        dialogVisible2:false,
        addr:{addrName:"", addrId:"",},
        rules:{
          commId: [{required: true, message: '请选择提货地址', trigger: 'change'}],
        }
      }
    },
    methods: {
      openCommUser(){
        //打开供应商
        this.dialogVisible2=true;
        this.$nextTick(item=>{
          this.$refs.commUserView.getData();
        })
      },
      handleClose2(){
        //关闭供应商列表
        this.$refs.commUserView.cancel();
      },
      getCommUser() {
        //获取所有的商户
        let user = {commercialState: 1};
        this.$axios.get("queryUsersByTypeId.action", {params: user})
          .then(res => {
            this.commUser = res.data;
          })
          .catch(err => {
            this.$message.error(err)
          })
      },
      getCarts() {
        //开始产生订单
        this.$axios.post("cart/cartIds.action", this.cartIds)
          .then(res => {
            res.data.forEach(item => {
              item.shop.imags[0].imagUrl = this.$store.state.path + item.shop.imags[0].imagUrl;
            })
            this.order.carts = res.data;
          })
          .catch(err => {
            this.$message.error(err)
          })
      },
      handleChange(id, num) {
        if (num != 1) {
          let cart = {id: id, quantity: num};
          this.$axios
            .put("cart/changeNum.action", cart)
            .then(res => {
              if (res.data.code == 0) {
                this.$message.error(res.data.msg);
              }
              this.getCarts();
            })
            .catch(err => {
              this.$message.error(err)
            })
        }

      },
      pay(formName) {
        //组装订单
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.sendFile();
          } else {
            this.$message.error("请填写正确的表单信息")
            return false;
          }
        });

      },
      sendFile(){
        this.order.uid = sessionStorage.getItem("id"); //用户信息
        this.$axios
          .post("order.action", this.order)
          .then(res => {
            if (res.data.code > 0) {
              //生成订单后跳转到收银页面
              this.openWindow(res.data.oid);
            } else {
              this.$message.error(res.data.msg);
            }
          })
          .catch(err => {
            this.$message.error(err)
          })
      },
      openWindow(oid) {
        //打开结算页面
        this.dialogVisible = true;
        this.$nextTick(item => {
          this.$refs.payMoney.getOrderById(oid);
        });
      }
    },
    computed: {
      money() {
        let money = 0.0;
        this.order.carts.forEach(item => {
          money += item.shop.shopPrice * item.quantity;
        })
        return money
      }
    },
    components: {
      PayMoney,
      CommUserView
    },
    created() {
      this.getCommUser();
      this.getCarts();
    }
  }
</script>

<style scoped>
  .row-top {
    margin-top: 18px;
  }

  .big_btn {
    height: 50px;
    width: 150px;
  }
</style>
